<template>
    <div>
      <main-layout>
        <template v-slot:top>
          <el-form ref="searchForm" :inline="true" :model="searchInfo">
         
            <el-form-item label="名称">
              <el-input v-model="searchInfo.name" placeholder="服务站名称" clearable />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchInfo.state" clearable placeholder="请选择状态" style="width: 140px;">
                <el-option :value="0" label="全部" />
                <el-option :value="1" label="启用" />
                <el-option :value="2" label="停用" />
              </el-select>
            </el-form-item>
  
            <el-form-item>
              <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
              <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </template>
  
        <div class="gva-btn-list">
            <el-button size="small" type="primary" icon="plus" @click="openAdd">新增服务站</el-button>
            <!-- <el-button size="small" type="danger" plain icon="delete" @click="delMore">删除用户</el-button> -->
        </div>
  
        <c-table ref="tableRef" :page="{ pageSize, pageIndex, total }" :lists="tableData" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" :loading="loading" @selection-change="selectionChange" rowKey="id" selectKey='id'>
          <el-table-column align="center" label="名称" min-width="110" prop="name" />
          <el-table-column align="center" label="联系人" min-width="140" prop="phone">
            <template #default="scope">
                {{ scope.row.contact }} / {{ scope.row.phone  }}
            </template>
          </el-table-column>
        
          <el-table-column align="center" label="状态" min-width="120" prop="state">
            <template #default="scope">
              {{ scope.row.state==1?'启用':(scope.row.state==2?'停用':'')}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" width="160" >
            <template #default="scope">
              {{ formatDateLong(scope.row.createTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="80px" fixed="right">
            <template #default="scope">
                <el-button type="text" icon="edit" size="small" @click="openEdit(scope.row,2)">编辑</el-button>
                <!-- <el-button type="text" icon="delete" size="small" @click="del([scope.row.userId])">删除</el-button> -->
            </template>
          </el-table-column>
        </c-table>
  
        <add-station v-if="addUserFlag" v-model:show="addUserFlag" :title="opreatType==1?'新增服务站':'编辑服务站'" @success="getTableData" :type="opreatType" :editData="editData"/> 
  
      </main-layout>
  
    </div>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue'
  import {getServiceStationList} from '@/api/station'
  
  import mainLayout from '@/components/custom/mainLayout.vue'
  import cTable from '@/components/custom/cTable.vue'
  import addStation from './components/addStation.vue'
  
  import {formatDateLong} from '@/utils/format'
  import { useUserStore } from '@/pinia/modules/user'
  import {message} from '@/utils/element'

  const userStore = useUserStore()
  
  const pageIndex = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({state:0})
  const loading = ref(true)
  const addUserFlag = ref(false)
  const tableRef = ref(null)
  const editData = ref({})
  const opreatType = ref(1)

  onMounted(()=>{
    getTableData()
  })
  
  const onReset = () => {
    searchInfo.value = {}
  }
  // 搜索
  const onSubmit = () => {
    pageIndex.value = 1
    tableRef.value.clear_selection()  // 清空所选
    getTableData()
  }
  // 分页
  const handleSizeChange = (val) => {
    pageIndex.value = 1
    pageSize.value = val
    getTableData()
  }
  
  const handleCurrentChange = (val) => {
    pageIndex.value = val
    getTableData()
  }
  
  // 查询
  const getTableData = async () => {
    const res = await getServiceStationList({ 
        pageNumber: pageIndex.value, 
        pageSize: pageSize.value, 
        ...searchInfo.value 
    })
    if (res.code == 0) {
      tableData.value = res.data.list
      total.value = res.data.total
    }
    loading.value = false
  }
  
//   let tableCheckeds = ref([])
//   const selectionChange= (items)=>{
//     tableCheckeds.value = items
//     //console.log("tableCheckeds",tableCheckeds.value)
//   }
  
  const openAdd = ()=>{
    opreatType.value = 1
    editData.value = {}
    addUserFlag.value = true
  }
  
  const openEdit = async (item,type)=>{
    opreatType.value = type
    editData.value = {...item}
    addUserFlag.value = true
    // const res = await getAccountDetail(item.userId) // 获取详情
    // if(res.code == 200){
    //   editData.value = res.data
    //   addUserFlag.value = true
    // }else{
    //   message('获取数据失败',3)
    // }
  }
//   const del = (userIdList)=>{
//     ElMessageBox.confirm(
//       '确认删除该数据吗?',
//       '提示',
//       {
//         confirmButtonText: '确定',
//         cancelButtonText: '取消',
//         type: 'warning',
//       }
//     ).then(async () => {
        
//     }).catch(() => {
        
//     })
//   }
//   const delMore = ()=>{
//     if(tableCheckeds.value.length<1){
//      return message('请选择需要删除的数据',3)
//     }
//     del(tableCheckeds.value)
//   }
  
 
  
  </script>
  
  <style lang="scss" scoped>
  .inputLine {
    display: flex;
    width: 200px;
    .zhi{
      padding: 0 10px;
    }
    s{
      font-style: normal;
      text-decoration: none;
      padding: 0 0 0 5px;
      color: var(--el-text-color-regular);
    }
  }
  </style>
  